<template>
  <div>
    <page-view>
      <!-- <template #option>
        <div class="btn-box">
          <el-button type="primary" @click="addHandle">新增</el-button>
        </div>
      </template> -->
      <template #form>
        <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
          <el-form-item prop="invoiceType" label="发票类型" label-width="70px">
            <el-select v-model="formInline.invoiceType" clearable placeholder="请选择发票类型">
              <el-option v-for="item in ticketTypeOptions" :key="item.value" :label="item.message" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </SearchForm>
      </template>
      <template v-slot:table="tableScope">
        <PubilcTable :tableData="tableData" :tableHeight="tableScope.tableHeight" :list-config="columns"
          :page-data="pageData" @on-action="onAction" :translateTextDeal="translateTextDeal" :loading="tableLoading" />

      </template>
    </page-view>
    <eForm :dialog-visible="dialogVisible" v-if="dialogVisible" :is-add="isAdd" @on-submit="onSearch"
      @handleClose="handleClose" ref="eFormRef" :ticketTypeOptions="ticketTypeOptions" />
  </div>
</template>
<script name="TicketTaxConfig">
import eForm from './components/addForm.vue'
import api from '@/api/index'
import { columns } from './components/config'
import { statusText } from '@/util/index'
import dayjs from 'dayjs'
export default {
  components: {
    eForm
  },
  data() {
    return {
      statusText,
      formInline: {
        invoiceType: ''
      },
      dialogVisible: false,
      isAdd: 'add',
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      ticketTypeOptions: [],
      columns,
      tableLoading: false,

    }
  },
  mounted() {
    this.getTicketType()


  },
  methods: {
    getTicketType() {
      api.taxConfig.ticketType().then(res => {
        console.log(res)
        this.ticketTypeOptions = res.invoiceTypeEnum
        this.onSearch()
      })
    },

    onSearch() {
      this.tableLoading = true
      const params = { ...this.formInline, ...this.pageData }
      api.taxConfig.taxConfigList(params).then((res) => {
        this.tableData = res.list || []
        this.pageData.total = res.total || 0
        this.tableLoading = false
      })
    },

    editRow(row) {
      this.dialogVisible = true
      this.isAdd = 'edit'
      this.$nextTick(() => {
        this.$refs.eFormRef.init({ ...row })
      })
    },
    addHandle() {
      this.dialogVisible = true
      this.isAdd = 'add'

    },
    onAction([item, row]) {
      const obj = {
        'edit': 'editRow',
        'pageNum': 'onSearch',
        'pageSize': 'onSearch'
      }
      if (typeof item === 'string') {
        this.pageData[item] = row
        if (item === 'pageSize') this.pageData.pageNum = 1
        this[obj[item]]()
      } else {
        this[obj[item.alias]](row)
      }
    },
    translateTextDeal(item, val) {
      if (item.alias == 'updateTime' && val) return dayjs(val).format('YYYY-MM-DD  hh:mm:ss')
    },

    handleClose() {
      this.dialogVisible = false
    },

  }
}

</script>

<style lang="scss" scoped>

</style>
